<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test5 Groups and Axes</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
			
			var dataArray = [20, 40, 50, 60]; 
			
			var width = 500;
			var height = 500;
			
			var widthScale = d3.scale.linear() 
							.domain([0, 60]) 
							.range([0, width]); 
			
			var colorScale = d3.scale.linear()
								.domain([0, 60])
								.range(["red", "blue"]);
			
			var axis = d3.svg.axis() //put an axis to our bar chart
							.ticks(5) //specify the number of ticks in the axis
							.scale(widthScale);
							
			var canvas = d3.select("body")
							.append("svg")
							.attr("width", width) 
							.attr("height", height)
							.append("g") //"group element" it is set to group svg elements together
							.attr("transform", "translate(20, 0)"); //transform is used to move our group up/down, sideways etc...
			
			var bars = canvas.selectAll("rect") 
							 .data(dataArray)
							 .enter() 
							 	.append("rect") 
								.attr("width", function(d) { return widthScale(d); })  
								.attr("height", 50)
								.attr("fill", function(d) { return colorScale(d); }) 
								.attr("y", function(d, i) { return i * 100 });
			
			canvas.append("g") //to make the axis go down the bar chart
					.attr("transform", "translate(0, 400)")
					.call(axis); //use the axis for our bar chart
							
		</script>
	</body>
</html>